<template>
  <div class="about-box">
    <div class="left">
      <img src="@/assets/img/vol.webp" class="img" />
      <div class="text">
        清贫，洁白朴素的生活，正是我们志愿者能够战胜许多困难的地方。
      </div>
    </div>

    <div class="right">
      <div class="vol">志愿者注册</div>
      <el-form
        :model="volunForm"
        ref="volunRef"
        :rules="volunRules"
        class="form"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="v_name">
              <el-input v-model="volunForm.v_name" /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="v_sex">
              <el-radio-group v-model="volunForm.v_sex">
                <el-radio label="男" />
                <el-radio label="女" /> </el-radio-group></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="v_birthday">
              <el-date-picker
                v-model="volunForm.v_birthday"
                type="date"
                placeholder="Pick a date"
                style="width: 100%" /></el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <span class="age">{{ age }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="政治面貌" prop="v_politic">
              <el-select v-model="volunForm.v_politic" placeholder="请选择">
                <el-option label="党员" value="党员" />
                <el-option label="团员" value="团员" />
                <el-option label="群众" value="群众" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="v_phone">
              <el-input v-model="volunForm.v_phone" /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证" prop="v_cardId">
              <el-input v-model="volunForm.v_cardId" /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="职业" prop="v_works">
              <el-input v-model="volunForm.v_works" /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信号" prop="v_wechat">
              <el-input v-model="volunForm.v_wechat" /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="常用邮箱" prop="v_email">
              <el-input v-model="volunForm.v_email" /> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="可上网时长" prop="v_line">
              <el-input v-model="volunForm.v_line" style="width: 100px" />
              <span class="hours">小时</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务时长" prop="v_serve">
              <el-input v-model="volunForm.v_serve" style="width: 100px" />
              <span class="hours">小时</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="爱好" prop="v_hobbies">
          <el-input v-model="volunForm.v_hobbies" />
        </el-form-item>
        <el-form-item label="居住地址" prop="v_addr">
          <el-input v-model="volunForm.v_addr" type="textarea" />
        </el-form-item>
      </el-form>

      <div class="submit">
        <el-button type="danger" @click="submitForm(volunRef)">注册</el-button>
        <el-button type="primary" @click="resetForm(volunRef)">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  type FormInstance,
  type FormRules,
  ElMessage,
  ElMessageBox,
} from "element-plus";
import { getCurrentInstance, ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import utils from "@/utils/utils";
import { useVolRegist } from "@/hooks/loginForm/volunRegist";
const { volunRef, volunForm, volunRules } = useVolRegist();

const { proxy }: any = getCurrentInstance();
const router = useRouter();
const userInfos = ref<any>({});
onMounted(async () => {
  userInfos.value = JSON.parse(
    window.sessionStorage.getItem("Infos") || "null"
  );
});
const age = ref(0);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) return;
    ElMessageBox.confirm("操作继续", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "success",
      draggable: true,
    })
      .then(() => {
        proxy.$http
          .post("/user/addVolun?id=" + userInfos.value.id, {
            v_name: volunForm.v_name,
            v_sex: volunForm.v_sex,
            v_birthday: volunForm.v_birthday,
            v_phone: volunForm.v_phone,
            v_wechat: volunForm.v_wechat,
            v_email: volunForm.v_email,
            v_age: age.value,
            v_politic: volunForm.v_politic,
            v_cardId: volunForm.v_cardId,
            v_addr: volunForm.v_addr,
            v_works: volunForm.v_works,
            v_hobbies: volunForm.v_hobbies,
            v_line: volunForm.v_line,
            v_serve: volunForm.v_serve,
          })
          .then((res: any) => {
            ElMessage({
              message: res,
              type: "success",
            });
            router.push("/userhome");
          });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消注册",
        });
      });
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//监听出生日期计算年龄
watch(
  () => volunForm.v_birthday,
  (newAge, old) => {
    age.value = utils.fillAge(JSON.stringify(newAge));
  }
);
</script>

<style lang="less" scoped>
.about-box {
  width: 80%;
  border: 3px solid #eee;
  box-shadow: 0 0 10px 10px #eee;
  border-radius: 10px;
  margin: 100px auto;
  display: flex;
  box-sizing: border-box;
  .left {
    width: 30%;
    background-color: red;
    color: #fff;
    font-size: 20px;
    border-radius: 10px 0 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    .img {
      width: 250px;
      height: 250px;
      border-radius: 50%;
    }
    .text {
      margin-top: 10px;
      text-indent: 2em;
    }
  }
  .right {
    flex: 1;
    padding: 10px 0;
    .vol {
      text-align: center;
      font-size: 32px;
      font-weight: bolder;
      color: red;
    }
    .form {
      padding: 10px;
      .age {
        // background-color: #fff;
        border: 2px solid rgb(223, 220, 220);
        width: 35px;
        height: 35px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .hours {
        margin-left: 8px;
      }
    }
    .submit {
      text-align: center;
      margin: 20px;
    }
  }
}
</style>
